<template>
	<div class="main">
		<div class="main-search">
			<span>学科：</span>
			<span style="margin-right: 20px">数学</span>
			<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
					 label-width="114px">
				<el-form-item label="题目ID" prop="tId">
					<el-input
						v-model="queryParams.tId"
						placeholder="请输题目ID"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="关联知识点序号" prop="tNumber">
					<el-input
						v-model="queryParams.tNumber"
						placeholder="关联知识点序号"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item prop="tCourse">
					<aselect :showBtn="false" title="关联课程" v-model="queryParams.course"></aselect>
				</el-form-item>
				<el-form-item label="题目难度" prop="tNandu">
					<el-select style="width: 200px" v-model="queryParams.tNandu">
						<el-option
							v-for="(item, index) in timunandu"
							:key="index"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" type="primary" @click="handleQuery">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-row :gutter="10" style="margin-bottom: 10px">
			<el-col :span="1.5">
				<el-button
					@click="handleAdd"
				>新增习题
				</el-button>
				<el-button
					type="primary"
				>导入习题
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @query-table="getList" />
		</el-row>

		<el-table class="cl-table" v-loading="loading" :data="courseList" @selection-change="handleSelectionChange">
			<el-table-column label="题目ID" align="center" prop="configId" />
			<el-table-column label="题目来源" align="center" prop="configName"
							 :show-overflow-tooltip="true" />
			<el-table-column label="题目类型" align="center" prop="configKey"
							 :show-overflow-tooltip="true" />
			<el-table-column label="题目属性" align="center" prop="configValue"
							 :show-overflow-tooltip="true" />
			<el-table-column label="题目难度" align="center" prop="configType" />
			<el-table-column label="题目内容" align="center" prop="remark" :show-overflow-tooltip="true" />
			<el-table-column label="推荐用时" align="center" prop="remark" :show-overflow-tooltip="true" />
			<el-table-column label="关联知识点" align="center" prop="remark"
							 :show-overflow-tooltip="true" />
			<el-table-column label="前测课程" align="center" prop="createTime" />
			<el-table-column label="创建人" align="center" prop="createTime" />
			<el-table-column label="最后修改人" align="center" prop="createTime" />

			<el-table-column  fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button
						type="text"
						icon="Edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['system:config:edit']"
					>修改
					</el-button>
					<el-button

						type="text"
						icon="Delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['system:config:remove']"
					>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog v-model="open" width="70%" append-to-body>
			<div class="el-dialog__header" style="position: relative; top: -40px;" slot="title">
				<span class="el-dialog__title">{{title}}</span>
				<el-button type="primary" style="padding-left: 16px; margin-left: 16px;" @click="showRelated">设置关联知识点、应用层次及推题权重</el-button>
			</div>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="题目来源" prop="place">
							<el-input v-model="form.place" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="题目类型" prop="leixing">
							<el-select clearable v-model="form.leixing">
								<el-option v-for="item in timushiyongleixing" :key="item.value"
										   :label="item.label"
										   :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="题目属性" prop="shuxing">
							<el-select clearable v-model="form.shuxing">
								<el-option v-for="item in timushuxing" :key="item.value"
										   :label="item.label"
										   :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="题目难度" prop="nandu">
							<el-select clearable v-model="form.nandu">
								<el-option v-for="item in timunandu" :key="item.value"
										   :label="item.label"
										   :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="推荐用时(秒)" prop="miao">
							<el-input-number max="100000000" v-model="form.miao" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<span style="font-weight: bold">题目内容</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" class="latex-item">
						<el-form-item label="题干" prop="tigan">
							<el-input v-model="form.tigan" />
						</el-form-item>
						<el-icon class="upload"><Upload /></el-icon>
						<img class="latex" @click="editorShow('tigan')" src="../../../assets/images/latex/cx.png" />
					</el-col>
					<el-col :span="8" class="latex-item">
						<el-form-item label="题问" prop="tiwen">
							<el-input v-model="form.tiwen" />
						</el-form-item>
						<el-icon class="upload"><Upload /></el-icon>
						<img class="latex" @click="editorShow('tiwen')" src="../../../assets/images/latex/cx.png" />
					</el-col>
					<el-col :span="8" class="latex-item">
						<el-form-item label="题示" prop="tishi">
							<el-input v-model="form.tishi" />
						</el-form-item>
						<el-icon class="upload"><Upload /></el-icon>
						<img class="latex" @click="editorShow('tishi')" src="../../../assets/images/latex/cx.png" />
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" class="latex-item">
						<el-form-item label="题解" prop="tijie">
							<el-input v-model="form.tijie" />
						</el-form-item>
						<el-icon class="upload"><Upload /></el-icon>
						<img class="latex" @click="editorShow('tijie')" src="../../../assets/images/latex/cx.png" />
					</el-col>
					<el-col :span="8" class="latex-item">
						<el-form-item label="答案" prop="daan">
							<el-input v-model="form.daan" />
						</el-form-item>
						<el-icon class="upload"><Upload /></el-icon>
						<img class="latex" @click="editorShow('daan')" src="../../../assets/images/latex/cx.png" />
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<editor v-if="showEditor" :data="data" @close="closeEditer" ref="editorRef" />
						<pro-upload-img
							v-if="showUpload"
							:fileList="fileList"
							:maxSize="1"
							accept=".jpg,.png"
							tip="图片格式，不超过2MB"
							@success="handleSuccess"
							@error="handleError"
						/>
					</el-col>
				</el-row>

				<el-row>
					<el-col>
						<span style="font-weight: bold">设定为前测题</span>
					</el-col>
				</el-row>
				<el-row>
					<aselect v-model="form.course" :courses="courses"></aselect>
				</el-row>
				<el-row>
					<template v-for="item in form.prefaceKnowledge">
						<el-check-tag
							effect="dark"
							class="question-tag"
							type="primary"
							checked
							@click="showRelated"
						>
							{{item.label}}
						</el-check-tag>
						<span class="question-tag_span">
							（{{item.level}}，{{item.weight}}%）
						</span>
					</template>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">保存</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog top="40px" title="关联知识点及应用层次" @close="cancelRelated" v-model="openRelated" width="70%" append-to-body>
			<related actionType="question" @selected="selectedPreface" ref="relatedRef" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Search, Upload } from '@element-plus/icons-vue';
import aselect from '../../common/aselect/index.vue';
import { timunandu, timushiyongleixing,	timushuxing } from './data';
import type { FormInstance } from 'element-plus';
import editor from '../common/editor.vue';
import related from '../common/related.vue';
import ProUploadImg from '/#/upload/index.vue';
const editorRef = ref<InstanceType<typeof editor> | null>(null);
const relatedRef = ref<InstanceType<typeof related> | null>(null);
// 数据定义
const loading = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const courseList = ref([]);
const title = ref('');
const open = ref(false);
const openLatex = ref(false);
const openRelated = ref(false);

const showEditor = ref(false);
const showUpload = ref(false);

const queryForm = ref<FormInstance>();
const formRef = ref<FormInstance>();
// 编辑器实例，必须用 shallowRef
const courses = ref([
	{ id: 1, name: '课程1', chapters: [] },
	{ id: 2, name: '课程2', chapters: [] }
]);
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	tId: undefined,
	tZhang: undefined,
	tCourse: undefined,
	tNandu: undefined,
	tStatus: undefined,
	tYStatus: undefined,
	course: [
		{ versionId:'', stageId: '', bchapterId: '', bsectionId: '', courseId: '', chapterId: '', sectionId: '' }
	]
});

const form = reactive({
	version: [],
	place: '',
	leixing: '',
	shuxing: '',
	nandu: '',
	miao: '',
	tigan: '',
	tiwen: '',
	tishi: '',
	tijie: '',
	daan: '',
	course: [
		{ versionId: '', courseId: '', chapterId: '', sectionId: '' }
	],
	prefaceKnowledge: []
});

const rules = reactive({});
let current = ref(null);
let data = ref(null);
const getList = () => {
	/*loading.value = true
	listConfig({ ...queryParams, ...dateRange.value }).then(response => {
	  courseList.value = response.rows
	  total.value = response.total
	  loading.value = false
	})*/
};

const cancel = () => {
	open.value = false;
	reset();
};

const reset = () => {
	Object.assign(form, {
		title: [],
		category: [],
		tags: []
	});

	formRef.value?.resetFields();
};

const handleQuery = () => {
	queryParams.pageNum = 1;
	getList();
};

const resetQuery = () => {
	queryForm.value?.resetFields();
	handleQuery();
};

const handleAdd = () => {
	reset();
	open.value = true;
	title.value = '新增习题';
};

const handleSelectionChange = (selection) => {
	ids.value = selection.map(item => item.configId);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
};

const handleUpdate = (row) => {
	reset();
	let p = localStorage.getItem('aa');
	if (p) Object.assign(form, JSON.parse(p));
	open.value = true;
	title.value = '修改习题';
};

const submitForm = () => {
	formRef.value?.validate(valid => {
		if (valid) {
			open.value = false;
		}
	});
};

const handleDelete = (row) => {
	console.log(row);

	/*ElMessageBox.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(() => {
	  return delConfig(configIds)
	}).then(() => {
	  getList()
	  ElMessage.success("删除成功")
	}).catch(() => {})*/
};

const showRelated = () => {
	openRelated.value = true;
}
const cancelRelated = () => {
	openRelated.value = false;
}

// 生命周期
onMounted(() => {
	getList();
});
const selectedPreface = (params) => {
	const newData = [...params]; // 确保是新数组
	form.prefaceKnowledge = reactive(newData);
}
const editorShow = (property) => {
	showEditor.value = true;
	data.value = form[property];
	current.value = property;
}
const closeEditer = (code) => {
	showEditor.value = false;
	if (code) {
		form[current.value] = code;
	}
}
</script>


<style scoped lang="scss">
.question-tag{
	cursor: pointer;
	margin-bottom: 12px
}
.question-tag_span{
	padding-top: 7px;
	font-size: 12px;
	margin-right: 16px;
}
</style>
